Refactor

1 files changed, 149 insertions, 0 deletions

diff --git a/src2/pages/my/invoice/[id].js b/src2/pages/my/invoice/[id].js
new file mode 100644
index 00000000..820c9af8
--- /dev/null
+++ b/src2/pages/my/invoice/[id].js
@@ -0,0 +1,149 @@
+import AppBar from "@/components/layouts/AppBar";
+import Layout from "@/components/layouts/Layout";
+import LineDivider from "@/components/elements/LineDivider";
+import WithAuth from "@/components/auth/WithAuth";
+import { useEffect, useState } from "react";
+import apiOdoo from "@/core/utils/apiOdoo";
+import { useRouter } from "next/router";
+import { useAuth } from "@/core/utils/auth";
+import VariantCard from "@/components/variants/VariantCard";
+import currencyFormat from "@/core/utils/currencyFormat";
+import Disclosure from "@/components/elements/Disclosure";
+import DescriptionRow from "@/components/elements/DescriptionRow";
+import { SkeletonList } from "@/components/elements/Skeleton";
+import VariantGroupCard from "@/components/variants/VariantGroupCard";
+
+export default function DetailInvoice() {
+  const router = useRouter();
+  const { id } = router.query;
+  const [ auth ] = useAuth();
+  const [ invoice, setInvoice ] = useState(null);
+
+  useEffect(() => {
+    if (auth && id) {
+      const loadInvoice = async () => {
+        const dataInvoice = await apiOdoo('GET', `/api/v1/partner/${auth?.partner_id}/invoice/${id}`);
+        setInvoice(dataInvoice);
+      }
+      loadInvoice();
+    }
+  }, [ auth, id ]);
+
+  const Customer = () => {
+    const customer = invoice?.customer;
+    const fullAddress = [];
+    if (customer?.street) fullAddress.push(customer.street);
+    if (customer?.sub_district?.name) fullAddress.push(customer.sub_district.name);
+    if (customer?.district?.name) fullAddress.push(customer.district.name);
+    if (customer?.city?.name) fullAddress.push(customer.city.name);
+
+    return (
+      <div className="p-4 pt-0 flex flex-col gap-y-4">
+        <DescriptionRow label="Nama">{ invoice?.customer?.name }</DescriptionRow>
+        <DescriptionRow label="Email">{ invoice?.customer?.email || '-' }</DescriptionRow>
+        <DescriptionRow label="No Telepon">{ invoice?.customer?.mobile || '-' }</DescriptionRow>
+        <DescriptionRow label="Alamat">{ fullAddress.join(', ') }</DescriptionRow>
+      </div>
+    );
+  };
+
+  const downloadTaxInvoice = () => {
+    window.open(`${process.env.ODOO_HOST}/api/v1/download/tax-invoice/${invoice.id}/${invoice.token}`, 'Download')
+  }
+  
+  const downloadInvoice = () => {
+    window.open(`${process.env.ODOO_HOST}/api/v1/download/invoice/${invoice.id}/${invoice.token}`, 'Download')
+  }
+
+  return (
+    <WithAuth>
+      <Layout className="pb-4">
+        <AppBar title="Detail Invoice" />
+        
+        { invoice ? (
+          <>
+            <div className="p-4 flex flex-col gap-y-4">
+              <DescriptionRow label="No Invoice">
+                { invoice?.name }
+              </DescriptionRow>
+              <DescriptionRow label="Status Transaksi">
+                { invoice?.amount_residual > 0 ? (
+                  <span className="badge-solid-red">Belum Lunas</span>
+                  ) : (
+                  <span className="badge-solid-green">Lunas</span>
+                ) }
+              </DescriptionRow>
+              <DescriptionRow label="Purchase Order">
+                { invoice?.purchase_order_name || '-' }
+              </DescriptionRow>
+              <DescriptionRow label="Ketentuan Pembayaran">
+                { invoice?.payment_term }
+              </DescriptionRow>
+              { invoice?.amount_residual > 0 && invoice.invoice_date != invoice.invoice_date_due && (
+                <DescriptionRow label="Tanggal Jatuh Tempo">
+                  { invoice?.invoice_date_due }
+                </DescriptionRow>
+              ) }
+              <DescriptionRow label="Nama Sales">
+                { invoice?.sales }
+              </DescriptionRow>
+              <DescriptionRow label="Tanggal Invoice">
+                { invoice?.invoice_date }
+              </DescriptionRow>
+              <div className="flex items-center">
+                <p className="text-gray_r-11 leading-none">Faktur Pembelian</p>
+                <button 
+                  type="button"
+                  className="btn-light py-1.5 px-3 ml-auto"
+                  onClick={downloadInvoice}
+                >
+                  Download
+                </button>
+              </div>
+              <div className="flex items-center">
+                <p className="text-gray_r-11 leading-none">Faktur Pajak</p>
+                <button 
+                  type="button"
+                  className="btn-light py-1.5 px-3 ml-auto"
+                  onClick={downloadTaxInvoice}
+                  disabled={!invoice.efaktur}
+                >
+                  Download
+                </button>
+              </div>
+            </div>
+
+            <LineDivider />
+
+            <Disclosure 
+              label="Detail Penagihan"
+            />
+
+            <Customer />
+
+            <LineDivider />
+
+            <Disclosure 
+              label="Detail Produk"
+            />
+
+            <div className="mt-2 p-4 pt-0 flex flex-col gap-y-3">
+              <VariantGroupCard 
+                variants={invoice?.products} 
+                buyMore 
+              />
+              <div className="flex justify-between mt-3 font-medium">
+                <p className="text-gray_r-11">Total Belanja</p>
+                <p>{ currencyFormat(invoice?.amount_total || 0) }</p>
+              </div>
+            </div>
+          </>
+        ) : (
+          <div className="p-4 py-6">
+            <SkeletonList number={12} />
+          </div>
+        ) }
+      </Layout>
+    </WithAuth>
+  );
+}
\ No newline at end of file